<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="mapwrap">
    <dv-border-box-12 class="top-container">
      <div class="data-content">
        <div class="silder-content">
          <div class="value">
            {{ totalWeight1 }}<label class="unit">g</label>
          </div>
          <div class="split-line"></div>
          <div class="label">累计回收</div>
        </div>
        <div class="gold-content">
          <!-- <div class="value gold-price">{{ topData.goldPrice }}<label class="unit">元</label></div>
          <div class="split-line"></div>
          <div class="label">今日金价</div>-->
        </div>
        <div class="silder-content">
          <div class="value">
            {{ todayWeight }}<label class="unit">g</label>
          </div>
          <div class="split-line"></div>
          <div class="label">今日回收</div>
        </div>
      </div>
    </dv-border-box-12>
      <Echart
        id="CenterMap"
        :options="options"
        ref="CenterMap"
        style="height: 75%"
      />
    <div class="bottom-content">
      <div class="item-content item1">
        <div class="tlt">机器总数</div>
        <div class="value-1">
          {{ totalCount }}<label class="unit">台</label>
        </div>
        <img src="../../assets/img/1678772742587-x7a-2Xqs.png" class="img-c" />
      </div>
      <div class="item-content item2">
        <div class="tlt">工作中</div>
        <div class="value-1">
          {{ runningCount }}<label class="unit">台</label>
        </div>
        <div class="info">工作率 : {{ runningPercent }}</div>
        <img src="../../assets/img/1678772741722-zCzWyYTb.png" class="img-c" />
      </div>
      <div class="item-content item3">
        <div class="tlt">空闲</div>
        <div class="value-1">{{ idleCount }}<label class="unit">台</label></div>
        <div class="info">空闲率 : {{ idlePercent }}</div>
        <img src="../../assets/img/1678772740924-UTvzMjBj.png" class="img-c" />
      </div>
      <div class="item-content item4">
        <div class="tlt">故障</div>
        <div class="value-1">
          {{ errorCount }}<label class="unit">台</label>
        </div>
        <div class="info">故障率 : {{ errorPercent }}</div>
        <img src="../../assets/img/1678772743378-sNEtQ56B.png" class="img-c" />
      </div>
    </div>
  </div>
</template>

<script>
import xzqCode from "../../utils/map/xzqCode";
import { currentGET } from "api/modules/echart.js";
import * as echarts from "echarts";
import { GETNOBASE } from "api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      maptitle: "设备分布图",
      options: {},
      code: "china", //china 代表中国 其他地市是行政编码
      echartBindClick: false,
      isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
      topData: {
        totalWeight: "0.00",
        goldPrice: "680.10",
        todayWeight: "0.00",
      },
    };
  },
  created() {},
  computed: mapState({
    totalWeight1: function (state) {
      return state.data.orderData.totalWeight;
    },
    goldPrice: function (state) {
      return state.data.crmData.activeUsers;
    },
    todayWeight: function (state) {
      return state.data.orderData.todayWeight;
    },
    totalCount: function (state) {
      return state.data.terminalData.totalCount;
    },
    idleCount: function (state) {
      return state.data.terminalData.idleCount;
    },
    runningCount: function (state) {
      return state.data.terminalData.runningCount;
    },
    errorCount: function (state) {
      return state.data.terminalData.errorCount;
    },
    errorPercent: function (state) {
      return (
        (
          (state.data.terminalData.errorCount /
            (state.data.terminalData.totalCount * 1.0)) *
          100
        ).toFixed(2) + "%"
      );
    },
    runningPercent: function (state) {
      return (
        (
          (state.data.terminalData.runningCount /
            (state.data.terminalData.totalCount * 1.0)) *
          100
        ).toFixed(2) + "%"
      );
    },
    idlePercent: function (state) {
      return (
        (
          (state.data.terminalData.idleCount /
            (state.data.terminalData.totalCount * 1.0)) *
          100
        ).toFixed(2) + "%"
      );
    },
    terminals: function (state) {
      //{ name: "北京", value: [116.4074, 39.9042, 200] },

      return state.data.terminalData.terminals.map((item) => ({
        name: item.name,
        value: [
          item.address.longtitude,
          item.address.latitude,
          item.shop,
          item.totalWeight,
          item.totalAmount,
        ],
      }));
    },
  }),
  mounted() {
    console.log("onmounted>>>");
    this.getData("china");
  },
  methods: {
    getData(code) {
      currentGET("big8", { regionCode: code }).then((res) => {
        console.log("设备分布", res);
        if (res.success) {
          this.getGeojson(res.data.regionCode, res.data.dataList);
          this.mapclick();
        } else {
          this.$Message.warning(res.msg);
        }
      });
    },
    /**
     * @description: 获取geojson
     * @param {*} name china 表示中国 其他省份行政区编码
     * @param {*} mydata 接口返回列表数据
     * @return {*}
     */
    async getGeojson(name, mydata) {
      this.code = name;
      //如果要展示南海群岛并且展示的是中国的话
      let geoname = name;
      if (this.isSouthChinaSea && name == "china") {
        geoname = "chinaNanhai";
      }
      //如果有注册地图的话就不用再注册 了
      let mapjson = echarts.getMap(name);
      if (mapjson) {
        mapjson = mapjson.geoJSON;
      } else {
        const prefixPath =
          process.env.NODE_ENV === "production"
            ? process.env.VUE_APP_BASE_API + "/dashboard"
            : "";
        mapjson = await GETNOBASE(
          prefixPath + `/map-geojson/${geoname}.json`
        ).then((res) => {
          return res;
        });
        echarts.registerMap(name, mapjson);
      }
      let cityCenter = {};
      let arr = mapjson.features;
      //根据geojson获取省份中心点
      arr.map((item) => {
        cityCenter[item.properties.name] =
          item.properties.centroid || item.properties.center;
      });
      let newData = [];
      mydata.map((item) => {
        if (cityCenter[item.name]) {
          newData.push({
            name: item.name,
            value: cityCenter[item.name].concat(item.value),
          });
        }
      });
      this.init(name, mydata, newData);
    },
    init(name, data, data2) {
      // console.log(data2);
      let top = 45;
      let zoom = 1.05;
      let option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        visualMap: {
          show: false,
          left: 20,
          bottom: 20,
          pieces: [
            { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
            { gte: 600, lte: 999, label: "600-999个" },
            { gte: 200, lte: 599, label: "200-599个" },
            { gte: 50, lte: 199, label: "49-199个" },
            { gte: 10, lte: 49, label: "10-49个" },
            { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
          ],
          inRange: {
            // 渐变颜色，从小到大
            color: [
              "#c3d7df",
              "#5cb3cc",
              "#8abcd1",
              "#66a9c9",
              "#2f90b9",
              "#1781b5",
            ],
          },
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: name,
          roam: false,
          selectedMode: false, //是否允许选中多个区域
          zoom: zoom,
          top: top,
          // aspectScale: 0.78,
          show: false,
        },
        series: [
          {
            name: "MAP",
            type: "map",
            map: name,
            aspectScale: 0.78,
            data: data,
            // data: [1,100],
            selectedMode: false, //是否允许选中多个区域
            zoom: zoom,
            geoIndex: 1,
            top: top,
            label: {
              show: true,
              position: "inside",
              color: "#FFF",
              fontSize: 10,
              formatter: "{b}",
            },
            itemStyle: {
              borderColor: "rgba(147, 235, 248, .8)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺为 false
              },
              shadowColor: "rgba(128, 217, 248, .3)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
          },
          {
            data: this.terminals,
            type: "effectScatter",
            coordinateSystem: "geo",
            Symbol: "../../assets/img/icon/icon_label.png",
            symbolSize: function (val) {
              return 10;
              // return val[2] / 50;
            },
            legendHoverLink: true,
            showEffectOn: "render",
            rippleEffect: {
              // period: 4,
              scale: 6,
              color: "rgba(255,255,255, 1)",
              brushType: "fill",
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) {
                  return params.name + "：" + params.data["value"][2];
                } else {
                  return params.name;
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            // label: {
            //   formatter: (param) => {
            //     return param.name.slice(2, 5);
            //   },
            //   fontSize: 11,
            //   offset: [0, 2],
            //   position: "bottom",
            //   textBorderColor: "#fff",
            //   textShadowColor: "#000",
            //   textShadowBlur: 10,
            //   textBorderWidth: 0,
            //   color: "#FFF",
            //   show: true,
            // },
            // colorBy: "data",
            itemStyle: {
              color: "rgba(255,255,255,1)",
              borderColor: "rgba(2255,255,255,2)",
              borderWidth: 4,
              shadowColor: "#000",
              shadowBlur: 10,
            },
          },
        ],
        //动画效果
        // animationDuration: 1000,
        // animationEasing: 'linear',
        // animationDurationUpdate: 1000
      };
      this.options = option;
    },
    message(text) {
      this.$Message({
        text: text,
        type: "warning",
      });
    },
    // mapclick() {
    //   if (this.echartBindClick) return;
    //   //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
    //   this.$refs.CenterMap.chart.on("click", (params) => {
    //     // console.log(params);
    //     let xzqData = xzqCode[params.name];
    //     if (xzqData) {
    //       this.getData(xzqData.adcode);
    //     } else {
    //       this.message("暂无下级地市!");
    //     }
    //   });
    //   this.echartBindClick = true;
    // },
  },
  watch: {
    // 监听 xAxisLabels 的变化，动态更新图表
    terminals: {
      handler(newval, oldval) {
        this.options.series[1].data = newval;
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    width: 100%;
    // padding: 0 0 10px 0;
    // box-sizing: border-box;
    background-color: blueviolet;
    position: relative;
    box-sizing: border-box;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}

.top-container {
  height: 108px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  color: rgb(131, 154, 170);
  position: relative;

  .data-content {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    align-items: center;
  }

  .gold-content {
    flex: 1;
    justify-content: center;
    justify-items: center;
    align-items: center;
  }

  .silder-content {
    width: 180px;
    justify-content: center;
    justify-items: center;
    align-items: center;
  }

  .label {
    font-weight: normal;
    font-size: 16px;
    margin: 0px 0px 0px;
    justify-content: center;
    font-weight: bold;
  }

  .value {
    letter-spacing: 0.02em;
    text-indent: 0.02em;
    font-size: 30px;
    letter-spacing: 0.02em;
    font-weight: bold;
  }

  .unit {
    font-size: 12px;
    color: #7b92a4;
    margin-left: 5px;
  }

  .gold-price {
    color: rgb(255, 229, 143);
  }

  .split-line {
    pointer-events: all;
    image-rendering: -webkit-optimize-contrast;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("../../assets/img/1675145134129-8rg2Kgqo.png");
    mask-image: none;
    mask-repeat: initial;
    mask-size: initial;
    background-color: initial;
    border-radius: 0px;
    cursor: pointer;
    width: 180px;
    height: 5px;
    margin: 6px 0px 6px;
  }
}

.bottom-content {
  height: 140px;
  width: 58%;
  position: absolute;
  bottom: 20px;
  display: flex;
  display: flex;
  flex-direction: row;
  z-index: 10000;
  padding-right: 16px;

  .item-content {
    margin-left: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-left: 20px;

    pointer-events: all;
    image-rendering: -webkit-optimize-contrast;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    mask-image: none;
    mask-repeat: initial;
    mask-size: initial;
    background-color: initial;
    border-radius: 0px;
    cursor: pointer;
  }

  .tlt {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: normal;
    margin: 0px 0px 11px;
    justify-content: flex-start;
    width: 100%;
  }

  .value-1 {
    display: flex;
    flex-direction: row;
    justify-items: flex-end;
    align-items: flex-end;
    letter-spacing: 0.02em;
    text-indent: 0.02em;
    height: auto;
    line-height: normal;
    font-size: 30px;
    font-weight: bolder;
    letter-spacing: 0.02em;
    margin-right: 0em;
    border-radius: 0px;
  }

  .unit {
    font-size: 12px;
    color: #7b92a4;
    font-weight: normal;
    vertical-align: super;
    margin-left: 6px;
    margin-bottom: 6px;
  }

  .info {
    margin-top: 3px;
    margin-left: 2px;
    font-size: 16px;
    font-weight: normal;
  }

  .img-c {
    position: absolute;
    width: 52px;
    height: 67.6px;
    top: 20px;
    right: 30px;
  }

  .item1 {
    color: rgb(255, 255, 255);
    background-image: url(../../assets/img/1678419208028-foajAi-F.png);
  }

  .item2 {
    color: rgb(212, 136, 6);
    background-image: url(../../assets/img/1678419206180-21r-hY8E.png);
  }

  .item3 {
    color: rgb(131, 154, 170);
    background-image: url(../../assets/img/1678419206945-Sa0Itmjo.png);
  }

  .item4 {
    color: rgb(168, 7, 26);
    background-image: url(../../assets/img/1678419205418-a3E3pEj7.png);
  }
}
</style>
